<?php

use ijony\helpers\Url;
use home\assets\PageAsset;

/* @var $this yii\web\View */

$this->title = 'Biffar';

PageAsset::register($this)->init([
    'css' => [
        'css/index.css',
        'css/swiper.min.css',
    ],
    'js' => [
        'js/swiper.min.js',
    ],
]);
?>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide" style="text-align: center"><a href="javascrip:;"><img src="tmp/slide-1.jpg" /></a></div>
        <div class="swiper-slide" style="text-align: center"><a href="javascrip:;"><img src="tmp/slide-2.jpg" /></a></div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
</div>

<div class="box origin-box">
    <div class="container">
        <div class="box-text">
            <h3>From 1958 to now</h3>
            <div class="split-line"></div>
            <p>从1958年创立至今Biffar已积累了60多年的顶级制门经验</p>
        </div>

        <div class="box-animation">
            <ul>
                <li>
                    <span class="line"></span>
                    <span class="year">1958</span>
                    <span class="point"></span>
                    <p>Biffar 公司<br />成立</p>
                </li>
                <li>
                    <span class="line"></span>
                    <span class="year">1966</span>
                    <span class="point"></span>
                    <p>开始手工<br />制造铜门</p>
                </li>
                <li>
                    <span class="line"></span>
                    <span class="year">1983</span>
                    <span class="point"></span>
                    <p>旋转型锁舌<br />诞生</p>
                </li>
                <li>
                    <span class="line"></span>
                    <span class="year">2003</span>
                    <span class="point"></span>
                    <p>Biffar 产品<br />进入中国市场</p>
                </li>
                <li>
                    <span class="line"></span>
                    <span class="year">2006</span>
                    <span class="point"></span>
                    <p>Mrs. Biffar<br />接管公司</p>
                </li>
                <li>
                    <span class="line"></span>
                    <span class="year">2015</span>
                    <span class="point"></span>
                    <p>荣获<br />成功科技奖</p>
                </li>
                <li>
                    <span class="line"></span>
                    <span class="year">2018</span>
                    <span class="point"></span>
                    <p>荣获2017/2018年度<br />流行产品奖</p>
                </li>
                <li>
                    <span class="line"></span>
                    <span class="year">2019</span>
                    <span class="point"></span>
                    <p>荣获德国设计大奖</p>
                </li>
            </ul>

            <div class="progress-line"></div>
        </div>

        <div class="box-bottom">
            <a href="<?= Url::to(['page/view', 'page' => 'origin']) ?>">源起 <span class="iconfont icon-next"></span></a>
        </div>
    </div>
</div>

<div class="box box-black handicraft-box">
    <div class="container">
        <div class="box-text">
            <h3>EXQUISITE HANDCRAFT</h3>
            <div class="split-line"></div>
            <p>Biffar 每一扇门的诞生，都需要专业技师的手工锤炼</p>
        </div>

        <div class="box-bottom">
            <a href="<?= Url::to(['page/view', 'page' => 'handicraft']) ?>">详情 <span class="iconfont icon-next"></span></a>
        </div>
    </div>
</div>

<div class="box selection-box">
    <div class="container">
        <div class="box-text">
            <h3>High-end material and process selection</h3>
            <div class="split-line"></div>
            <p>顶级材料及工艺的选择，保证其应对各种极端环境和个性需求</p>
        </div>

        <div class="box-body">
            <ul>
                <li class="selection-1"><a href="<?= Url::to(['page/view', 'page' => 'protection']) ?>"></a><span></span></li>
                <li class="selection-2"><a href="<?= Url::to(['page/view', 'page' => 'thermal']) ?>"></a><span></span></li>
                <li class="selection-3"><a href="<?= Url::to(['page/view', 'page' => 'noise-reduction']) ?>"></a><span></span></li>
                <li class="selection-4"><a href="<?= Url::to(['page/view', 'page' => 'air-tightness']) ?>"></a><span></span></li>
                <li class="selection-6"><a href="<?= Url::to(['page/view', 'page' => 'dust-retardation']) ?>"></a><span></span></li>
                <li class="selection-5"><a href="<?= Url::to(['page/view', 'page' => 'fire-resistance']) ?>"></a><span></span></li>
                <li class="selection-8"><a href="<?= Url::to(['page/view', 'page' => 'special-function2']) ?>"></a><span></span></li>
                <li class="selection-7"><a href="<?= Url::to(['page/view', 'page' => 'special-function']) ?>"></a><span></span></li>
            </ul>
        </div>
    </div>
</div>

<div class="box box-black quality-box">
    <div class="container">
        <div class="box-text">
            <h1>50<em>多年</em></h1>
            <h3>Patent protective film</h3>
            <div class="split-line"></div>
            <p>铜面专利保护膜，采用创新技术，防腐抗氧化</p>
        </div>

        <div class="box-bottom">
            <a href="<?= Url::to(['page/view', 'page' => 'patent-protective-film']) ?>">详情 <span class="iconfont icon-next"></span></a>
        </div>
    </div>
</div>

<div class="box technology-box">
    <div class="container">
        <div class="box-text">
            <h3>Science and technology guarantee</h3>
            <div class="split-line"></div>
            <p>独创的电动马达驱动、勾形锁、特种钥匙等等新技术，保障安全的同时，让门的使用回归到最自然、最合理的状态</p>
        </div>

        <div class="box-body">
            <div class="grid-slide">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="tmp/technology-1.jpg" />
                        <p>专利旋转型锁舌</p>
                        <span class="split-line"></span>
                    </div>
                    <div class="swiper-slide">
                        <img src="tmp/technology-2.jpg" />
                        <p>反叉型锁舌</p>
                        <span class="split-line"></span>
                    </div>
                    <div class="swiper-slide">
                        <img src="tmp/technology-3.jpg" />
                        <p>金刚浮动护壳</p>
                        <span class="split-line"></span>
                    </div>
                    <div class="swiper-slide">
                        <img src="tmp/technology-4.jpg" />
                        <p>三维电子交叉锁芯</p>
                        <span class="split-line"></span>
                    </div>
                </div>
            </div>
            <a class="slide-nav slide-left"><span class="iconfont icon-left"></span></a>
            <a class="slide-nav slide-right"><span class="iconfont icon-right"></span></a>
        </div>
    </div>
</div>

<div class="box box-black competence-box">
    <div class="container">
        <div class="box-text">
            <h3>Top Competence</h3>
            <div class="split-line"></div>
            <p>至尊品质</p>
        </div>

        <div class="box-body">
            <ul>
                <li><a href="<?= Url::to(['page/view', 'page' => 'uncompromising-quality']) ?>"><img src="img/competence-1.jpg" /><p>坚实材质</p></a></li>
                <li><a href="<?= Url::to(['page/view', 'page' => 'handicraft']) ?>"><img src="img/competence-2.jpg" /><p>极致手工</p></a></li>
                <li><a href="<?= Url::to(['page/view', 'page' => 'customize-design']) ?>"><img src="img/competence-3.jpg" /><p>定制设计</p></a></li>
                <li><a href="<?= Url::to(['page/view', 'page' => 'ex-work']) ?>"><img src="img/competence-4.jpg" /><p>整装出厂</p></a></li>
                <li><a href="<?= Url::to(['page/view', 'page' => 'service']) ?>"><img src="img/competence-5.jpg" /><p>专属服务</p></a></li>
            </ul>
        </div>
    </div>
</div>

<?php

$js = <<<JS

let message = '$message';

if(message){
    alert(message);
}

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100,
    centeredSlides: true,
    autoplay: {
        delay: 3000
    },
});

var gridSlide = new Swiper('.grid-slide', {
    loop: true,
    slidesPerView: 4,
    spaceBetween: 40,
    navigation: {
        nextEl: '.slide-right',
        prevEl: '.slide-left',
    }
});

JS;

$this->registerJs($js);